import { Tooltip } from 'antd'
import extensionDesc from '@/assets/image/screenshot/extension-en.png';
import debugBaidu from '@/assets/image/screenshot/debug-baidu.png';

## 온라인 체험#online

> 전체 코드를 보려면 클릭하세요: [Codesandbox](https://codesandbox.io/p/sandbox/page-spy-with-react-k3pzzt)

<iframe
  width="100%"
  src="https://codesandbox.io/embed/k3pzzt?view=editor+%2B+preview&module=%2Fpublic%2Findex.html"
  title="page-spy-with-react"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

## 사용 방법#usage

### script 태그로 도입#script-usage

#### 1단계#script-usage-step-1

클라이언트 프로젝트에 `<script>` 로드:

```html
<!-- PageSpy SDK -->
<script crossorigin="anonymous" src="{deployUrl}/page-spy/index.min.js"></script>

<!-- 플러그인 (선택사항이지만 권장) -->
<script crossorigin="anonymous" src="{deployUrl}/plugin/data-harbor/index.min.js"></script>
<script crossorigin="anonymous" src="{deployUrl}/plugin/rrweb/index.min.js"></script>
```

#### 2단계#script-usage-step-2

PageSpy와 플러그인을 초기화합니다. [설정 옵션]({VITE_SDK_BROWSER_REPO})을 통해 SDK 동작을 사용자 정의할 수 있습니다:

<blockquote>
  <details>
    <summary>도입된 플러그인은 어떤 기능을 제공하나요?</summary>
    <div>
      [DataHarborPlugin]({VITE_PLUGIN_DATA_HARBOR})과 [RRWebPlugin]({VITE_PLUGIN_RRWEB}) 두 플러그인은 PageSpy의 기능을 확장하는 데 사용됩니다:
      - **DataHarborPlugin**: PageSpy 자체는 온라인 모드만 지원하며, 디버깅 중 클라이언트와 디버깅 엔드포인트가 동시에 온라인 상태여야 합니다. DataHarborPlugin은 PageSpy가 오프라인 디버깅을 가능하게 합니다. 자세한 내용은 [오프라인 로그](./offline-log)를 참조하세요.
      - **RRWebPlugin**: [rrweb](https://github.com/rrweb-io/rrweb/blob/master/guide.ko.md)을 사용하여 사용자 작업을 기록합니다. 일반적으로 DataHarborPlugin과 함께 사용됩니다.

      [플러그인 개발](./plugins)을 통해 자신만의 PageSpy를 만들 수도 있습니다!
    </div>
  </details>
</blockquote>

```html
<script>
  window.$harbor = new DataHarborPlugin();
  window.$rrweb = new RRWebPlugin();

  [window.$harbor, window.$rrweb].forEach(p => {
    PageSpy.registerPlugin(p)
  })

  window.$pageSpy = new PageSpy();
</script>
```

### ESM으로 도입#esm-usage

#### 1단계#esm-usage-step-1

:::code-group

```bash yarn
yarn add @huolala-tech/page-spy-browser @huolala-tech/page-spy-plugin-data-harbor @huolala-tech/page-spy-plugin-rrweb
```

```bash npm
npm install @huolala-tech/page-spy-browser @huolala-tech/page-spy-plugin-data-harbor @huolala-tech/page-spy-plugin-rrweb
```

:::

#### 2단계#esm-usage-step-2

```js
import PageSpy from '@huolala-tech/page-spy-browser';
import DataHarborPlugin from '@huolala-tech/page-spy-plugin-data-harbor';
import RRWebPlugin from '@huolala-tech/page-spy-plugin-rrweb';

window.$harbor = new DataHarborPlugin();
window.$rrweb = new RRWebPlugin();

[window.$harbor, window.$rrweb].forEach(p => {
  PageSpy.registerPlugin(p);
})

// ESM 모드에서는 배포 주소를 자동으로 분석할 수 없으므로 다음 매개변수를 수동으로 구성해야 합니다
window.$pageSpy = new PageSpy({
  api: "{deployPath}",
  clientOrigin: "{deployUrl}",
  enableSSL: {enableSSL},
});
```

이제 브라우저 프로젝트에서 PageSpy를 사용하기 위한 모든 단계가 완료되었습니다. 페이지 상단 메뉴를 클릭하여 <Tooltip title="메뉴는 기본적으로 숨겨져 있습니다. 배포 후 표시됩니다." color="purple"><a href="javascript:void(0)">시작 디버깅</a></Tooltip> 사용!

## 프레임워크에 통합#framework

PageSpy는 CodeSandbox 플랫폼에서 주요 프레임워크의 통합 가이드를 공개했습니다. 온라인으로 경험해 보세요:

- **React**：[CodeSandbox - PageSpy in React](https://codesandbox.io/p/sandbox/page-spy-with-react-k3pzzt)
- **Vue**：[CodeSandbox - PageSpy in Vue](https://codesandbox.io/p/sandbox/page-spy-with-vue-ft35qs)
- **Svelte**：[CodeSandbox - PageSpy in Svelte](https://codesandbox.io/p/sandbox/page-spy-with-svelte-p6mxd6)
- **Angular**：[CodeSandbox - PageSpy in Angular](https://codesandbox.io/p/sandbox/page-spy-with-angular-6wg3ps)
- **Nextjs**：[CodeSandbox - PageSpy in Nextjs](https://codesandbox.io/p/sandbox/page-spy-with-nextjs-5htxv5)
- **Nuxtjs**：[CodeSandbox - PageSpy in Nuxtjs](https://codesandbox.io/p/sandbox/page-spy-with-nuxtjs-8znq22)

## 브라우저 플러그인#extension

PageSpy는 코드 통합 없이도 모든 웹 페이지에서 PageSpy를 사용할 수 있는 브라우저 플러그인을 제공합니다!

네, 맞습니다! PageSpy 브라우저 플러그인을 사용하면 거의 모든 웹 페이지를 디버깅할 수 있습니다! (CSP 정책이 설정된 일부 웹 사이트는 작동하지 않을 수 있습니다)

### 설치#install-extension

- [Chrome 웹 스토어](https://chromewebstore.google.com/detail/pagespy/kpfigmbgeedkgnjnlpilghiffepahlmk)에서 원클릭으로 설치하거나
- [브라우저 플러그인](https://github.com/HuolalaTech/page-spy-extension/tree/main/packages/online-pagespy-extension) 저장소로 이동하여 README 문서에 따라 수동으로 설치하세요.

### 패널 매개변수#extension-panel

<a href={extensionDesc} target="_blank">
  <img src={extensionDesc} />
</a>  

<blockquote>
  <details>
    <summary>참고 예제: 바이든 대통령의 홈페이지 디버깅</summary>
    <a href={debugBaidu} target="_blank">
      <img src={debugBaidu} />
    </a>
  </details>
</blockquote>

